<template>
  <div class="Singerdetails1">
    <div class="main">
      <div class="imglist">
        <span class="span1">{{$route.query.name}}简介</span>
        <p class="p1">&nbsp;&nbsp;&nbsp;&nbsp;{{datalist.briefDesc}}</p>
        <div style="margin-top:50px;display: flex;" v-for="(item,index) in datalist.introduction" :key="index">
          <p class="span1" style="width:100px;">{{item.ti}}</p>
          <div class="p1" style="margin-top:20px;margin-left: -40px;" v-html="item.txt"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Singerdetails1',
  computed: {
    ...mapState({
      datalist: state => state.Singger.datalist
    })
  },
  mounted() {
    this.$store.dispatch('getGetthesingerdescription', { id: this.$route.query.id })
  }
}
</script>

<style lang="less" scoped>
.Singerdetails1 {
  margin-top: 20px;
  .main {
    .imglist {
      .span1 {
        font-size: 14px;
        font-weight: 800;
        margin-left: 20px;
      }
      .p1 {
        margin-top: 10px;
        margin-left: 20px;
        width: 1300px;
        font-size: 14.5px;
        line-height: 220%;
        opacity: 0.6;
      }
    }
  }
}
</style>